<script setup lang="ts">
import useStore from '@/store';
import { storeToRefs } from 'pinia';
// 简单数据类型需要使用storeTorefs,这里直接解构赋值是能直接修改数据的，并且数据本地存储也修改了。
// 但是如果使用storeToRefs，再解构就无法改变了。
const member = useStore().member;
const { token, profile } = storeToRefs(useStore().member);
console.log(token, 'token');

function logOut() {
  member.logout();
}
</script>
<template>
  <nav class="top-nav">
    <div class="nav-right">
      <ul>
        <template v-if="token">
          <li>
            <img
              :src="profile.avatar"
              alt=""
              style="width: 14px; height: 14px; border-radius: 7px"
            />
            <a> {{ profile.nickname || profile.account || profile.mobile }}</a>
          </li>
          <li><a href="#" @click.prevent="logOut">退出登录</a></li>
        </template>
        <template v-else>
          <li>
            <!-- 使用传递target参数把目前的路由保存下来，等登录完之后再重新跳回该路由。 -->
            <router-link :to="`/login?target=${$route.fullPath}`"
              >请先登录</router-link
            >
          </li>
          <li><a>免费注册</a></li>
        </template>
        <li><router-link to="/member">我的订单</router-link></li>
        <li><a>会员中心</a></li>
        <li><a>帮助中心</a></li>
        <li><a>关于我们</a></li>
        <li>
          <a><span class="iconfont icon-phone"></span>手机版</a>
        </li>
      </ul>
    </div>
  </nav>
</template>
<style lang="less" scoped>
.icon-phone {
  font-size: 14px;
}
.top-nav {
  padding: 0 12px;
  background-color: #333;
  height: 53px;
  .nav-right {
    float: right;
    ul {
      line-height: 53px;
      li {
        display: inline-block;
        a {
          color: #cdcdcd;
          padding: 0 15px;
          border-left: 2px solid #666;
        }
        &:first-child > a {
          border: 0;
        }
      }
    }
  }
}
</style>
